<!-- 轮播图 -->

<template>
    <div class="swiper">
        <button id="sub" @click="sub">&lt;</button>
        <img id="swiper-pic" :src="surl[i]" alt="homepic">
        <button id="add" @click="add">&gt;</button>
    </div>
</template>

<script>
    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "Swiper",
        data() {
            return {
                i: 0,
                surl: [
                    require('../../assets/images/7.jpg'),
                    require('../../assets/images/8.jpg'),
                    require('../../assets/images/9.jpg'),
                ],
            }
        }, 
        methods: {
            sub: function(){
                if(this.i === 0) {
                    return this.i = 0
                } else {
                    this.i--
                }
                console.log(this.i)
            },
            add: function(){
                const len = this.surl.length - 1;
                if (this.i === len) {
                    return this.i = len
                } else {
                    this.i++
                }
                console.log(this.i)
            }
        }
    }
</script>

<style>
    .swiper {
        display: flex;
        height: 10rem;
        margin-top: 10px;
        width: 80%;
        /* background-color: beige; */
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }
    #swiper-pic {
        flex: 10;
    }
    .sub {
        flex: 1;
    }
    .add {
        flex: 1;
    }
</style>